window.addEventListener('load',function(){
  let box = document.querySelector('.box')
  let left = document.querySelector('.left')
  let right = document.querySelector('.right')
  let banner = document.querySelector('#banner')
  let lis = banner.querySelectorAll('li')
  let width = box.offsetWidth
  let index = 0 // 左边图片的下标
  let timer = null
  setInterval(() => {
    right.click()
  }, 2000);
  box.addEventListener('mouseenter',function(){
    left.style.display = 'block'
    right.style.display = 'block'
  })
  box.addEventListener('mouseleave',function(){
    left.style.display = 'none'
    right.style.display = 'none'
  })

  right.addEventListener('click',function(){
    // 让这个ul向左走这个长度 index * width
    if(index === lis.length-1){
      index = 0
      getReset()
    }
    index++
    getNext()
  })
  function getNext(){
    banner.style.transition = '1s'
    banner.style.left = '-' + index * width + 'px'
  }
  function getReset(){
    banner.style.left = '0px'
  }

})